<?php
header('Content-Type:text/html;charset=utf-8');
?>
<!DOCTYPE html>
<html>
<head>
	<title>jQuery Test Page</title>
</head>
<body>
<form action="">
<div id="show">

</div>
<input type="button" id="prev" value="上一页"/>
<input type="button" id="next" value="下一页"/>
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var pageIndex = 1;

	$.get('jQueryBack.php', {index: pageIndex} ,function(data){
		var array = eval(data);
		var text = '' ;
		text += '<table><tr><td>编号</td><td>用户名</td><td>密码</td></tr>';
		for ( var i = 0; i < array.length; i++) {
			 text += '<tr><td>'+array[i].id+'</td><td>'+array[i].username+'</td><td>'+array[i].password+'</td></tr>';
		}
		text += '</table>';
		$("#show").append(text);
	});

	$("#prev").click(function(){
		if(pageIndex > 1){
			$.get('jQueryBack.php', {index: --pageIndex} ,function(data){
				$("table").remove();
				var array = eval(data);
				var text = '' ;
				text += '<table><tr><td>编号</td><td>用户名</td><td>密码</td></tr>';
				for ( var i = 0; i < array.length; i++) {
					 text += '<tr><td>'+array[i].id+'</td><td>'+array[i].username+'</td><td>'+array[i].password+'</td></tr>';
				}
				text += '</table>';
				$("#show").append(text);
			});
				
		}else {
			alert("当前页已经是第一页！");	
		}
	});

	$("#next").click(function(){
		$.get('jQueryBack.php', {index: ++pageIndex} ,function(data){
			var array = eval(data);
			var text = '' ;
			if( array.length ){
				$("table").remove();
				text += '<table><tr><td>编号</td><td>用户名</td><td>密码</td></tr>';
				for ( var i = 0; i < array.length; i++) {
					 text += '<tr><td>'+array[i].id+'</td><td>'+array[i].username+'</td><td>'+array[i].password+'</td></tr>';
				}
				text += '</table>';
				$("#show").append(text);
			}else{
				alert("当前页已经是最后一页！");
				pageIndex --;
			}
		});
		
	});
});
</script>
</body>
</html>